$(document).ready(function() {
    // 使用事件委托来确保即使按钮是后来添加的，也能触发事件
    $('body').on('click', '[data-toggle="modal"]', function() {
        const billId = $(this).data('upbill'); // 从触发元素获取账单ID
        $('#bill-id').val(billId); // 设置隐藏输入框的值为账单ID
    });

    // 当点击保存按钮时发送 PUT 请求
    $('#save-button').on('click', function() {
        const billStatus = $('#bill-status').val();
        const paymentDate = $('#payment-date').val();
        const billId = $('#bill-id').val();

        if (billStatus && paymentDate && billId) {
            updateBill(billId, billStatus, paymentDate);
        } else {
            alert('请填写完整信息');
        }
    });

    // 更新账单状态和还款日期的函数
    function updateBill(billId, billStatus, paymentDate) {
        $.ajax({
            url: '/bill/' + billId + '/update_status', // 构建请求URL
            type: 'PUT', // 请求类型
            contentType: 'application/json', // 发送数据的格式
            data: JSON.stringify({ // 将数据转换为JSON字符串
                bill_status: billStatus,
                payment_date: paymentDate
            }),
            success: function(response) {
                // 请求成功的回调函数
                alert('账单状态更新成功');
                $('#exampleModal').modal('hide'); // 关闭模态框
                // 刷新整个页面
                location.reload();
            },
            error: function(xhr, status, error) {
                // 请求失败的回调函数
                alert('更新失败，请稍后再试');
                console.error('Error:', error);
            }
        });
    }
});